<style type="text/css">
  .credit_card_2017 td {
    padding: 3px;
  }

  .credit_card_2017 table.noborder td {
    border: none;
    padding: 0 3px;
  }

  .credit_card_2017 input[type=button] {
    cursor: pointer;
  }

  .credit_card_2017 .red {
    color: #fb1414;
  }

  .credit_card_2017 .red1 {
    color: #ce2929;
    font-weight: bold;
  }

  .clear0 {
    clear: both;
    width: 100%;
    font-size: 0;
    height: 0px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0px;
  }

  .clear {
    clear: both;
    width: 100%;
    font-size: 0;
    height: 15px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0px;
  }

  .clear20 {
    clear: both;
    width: 100%;
    font-size: 0;
    height: 20px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0px;
  }

  .clear5 {
    clear: both;
    width: 100%;
    font-size: 0;
    height: 5px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0px;
  }

  .clear10 {
    clear: both;
    width: 100%;
    font-size: 0;
    height: 10px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0px;
  }

  .credit_card_2017 .accept_box {
    width: 100%;
    height: 170px;
    margin-bottom: 20px
  }

  .credit_card_2017 .billing_address {
    position: relative;
    padding-top: 10px;
  }

  .credit_card_2017 .billing_address .tit {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 15px;
    position: relative;
    line-height: 20px;
    height: 20px;
  }

  .credit_card_2017 .billing_address .tit .badd_titr {
    position: absolute;
    right: 0;
    top: 0;
  }

  .credit_card_2017 .billing_address .tit .badd_titr select {
    height: 20px;
  }

  .credit_card_2017 .billing_address .baddress_con {
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    z-index: 10;
    background: #fff;
  }

  .credit_card_2017 .billing_address .baddress_con p {
    height: 42px;
    line-height: 42px;
    padding-left: 15px;
    border-bottom: 1px solid #ccc;
  }

  .credit_card_2017 .billing_address .baddress_con .radio_2 {
    border: 0;
  }

  .credit_card_2017 .billing_address .baddress_con .badd_radio {
    vertical-align: middle;
    margin-right: 4px;
    cursor: pointer;
  }

  .credit_card_2017 .billing_address .address_pop {
    background: #fbfbfb;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    z-index: 9;
    padding: 30px 20px 0;
    overflow: hidden;
    margin-top: -4px;
    display: none;
  }

  .credit_card_2017 .billing_address .address_pop .accept_txt {
    float: left;
    width: 100%;
    border: 1px solid #ccc;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    text-indent: 10px;
    margin-bottom: 15px;
    background: #fff;
  }

  .credit_card_2017 .billing_address .address_pop .leftright_txt .accept_txt {
    width: 275px;
  }

  .credit_card_2017 .billing_address .address_pop .fr {
    float: right;
  }

  .credit_card_2017 .billing_address .address_btn {
    display: block;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 4px;
    background: #4c4c4c;
    text-align: center;
    font-size: 16px;
    color: #fff;
    border: 0;
    width: 330px;
    margin: 0 auto;
  }

  .credit_card_2017 .accept_top {
    padding-bottom: 15px;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
    height: 30px;
  }

  .credit_card_2017 .accept_top a.pic {
    display: inline-block;
    width: 57px;
    height: 26px;
    vertical-align: middle;
    border: 1px solid #ccc;
    margin-left: 10px;
    color: #333;
  }

  .credit_card_2017 .accept_top .tit {
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    line-height: 20px;
    height: 20px;
  }

  .credit_card_2017 .accept_top a.pic span {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .credit_card_2017 .accept_top a.pic img {
    max-width: 57px;
    max-height: 26px;
    vertical-align: middle;
  }

  .credit_card_2017 .accept_con .cardno_con {
    position: relative;
  }

  .credit_card_2017 .accept_con .cardno_con img {
    height: 30px;
    position: absolute;
    right: 5px;
    top: 3px;
    display: none;
  }

  .credit_card_2017 .accept_con .accept_txt {
    float: left;
    width: calc(33.3333% - 12px) !important;
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    text-indent: 10px;
    margin-bottom: 15px;
  }

  .credit_card_2017 .accept_con .select {
    height: 36px;
    margin-right: 18px !important;
    width: 199px;
  }

  .credit_card_2017 .accept_con .expiration {
    float: right;
    width: 300px;
  }

  .credit_card_2017 .accept_con .expiration .accept_txt {
    width: 143px;
  }

  .credit_card_2017 .accept_con .fr {
    float: right;
  }

  .credit_card_2017 .accept_btn {
    display: block;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 4px;
    background: #149EE3;
    text-align: center;
    font-size: 16px;
    color: #fff;
    border: 0;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
  }

  .credit_card_2017 .accept_btn[disabled] {
    background: #ccc
  }

  .accept_top .badd_titr {
    position: absolute;
    right: 0;
    top: 5px;
  }

  .credit_card_2017 .accept_con #cardno_cover {
    height: 38px !important;
    line-height: 38px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .credit_card_2017 .accept_top .order_radio_box {
    padding: 10px 0 0
  }

  .credit_card_2017 .accept_top .order_radio_box .radio_label {
    padding: 0
  }

  .credit_card_2017 .accept_top .order_radio_box .radio_icon {
    box-shadow: 0 0 0 10px #149EE3 inset
  }

  .credit_card_2017 .accept_top .order_radio_box .radio_t {
    right: 0
  }

  .credit_card_2017 .cardno_date .valid-date {
    width: calc(50% - 12px);
  }

  .credit_card_2017 .cardno_date .valid-date .accept_txt {
    width: 100% !important;
  }

  .credit_card_2017 .cardno_date .valid-date.valid-err input {
    border: 1px solid red
  }

  .credit_card_2017 .cardno_date .valid-date.cvv {
    float: right
  }

  .credit_card_2017 .accept_cvv {
    float: right !important
  }

  .credit_card_2017 .accept_box {
    border: 1px solid #149EE3;
    border-radius: 5px;
    padding: 10px 10px 20px;
    box-sizing: border-box;
  }

  .credit_card_2017 .accepted_payment_list {
    display: flex;
  }

  .credit_card_2017 .accepted_payment_list .accepted_payment_image {
    display: flex;
    align-item: center;
    border: 1px solid #d9d9d9;
    margin-left: 10px
  }

  .credit_card_2017 .accepted_payment_list .accepted_payment_image_more {
    margin-left: 10px
  }

  .credit_card_2017 .accepted_payment_list img {
    width: 40px;
    height: 20px
  }

  .credit_card_2017 .valid-date {
    position: relative;
    display: inline-block;
  }

  .credit_card_2017 .valid-err .err {
    color: red;
    position: absolute;
    left: 0;
    bottom: -5px;
  }
</style>

<link rel="stylesheet" href="//us01.imgcdn.ymcart.com/0/animate.min.css" />
<div class="credit_card_2017">
  <form
  
    action="https://xiaoyuer-001.oemsaas.cn/checkouts/payment/rctpay/doPay?order_number=TD2023083128600"
    method="post" id="form_post" autocomplete="off">
    <input type='hidden' name='resolution' value='' />
    <input type='hidden' name='timezone' value='Etc/GMT-8' />
    <input type='hidden' name='os' value='Macintosh' />
    <input type='hidden' name='browser' value='Chrome 116' />
    <input type="hidden" value="" name="BrowserDate" id="BrowserDate">
    <input type="hidden" value="" name="BrowserDateTimezon" id="BrowserDateTimezon">
    <input type="hidden" value="" name="BrowserUserAgent" id="BrowserUserAgent">
    <input type="hidden" value="" name="BrowserName" id="BrowserName">
    <input type="hidden" value="" name="BrowserSystemLanguage" id="BrowserSystemLanguage">
    <input type="hidden" value="" name="Resolution" id="Resolution">
    <input type="hidden" value="" name="BrowserSystem" id="BrowserSystem">
    <input type="hidden" value="" name="BrowserLanguage" id="BrowserLanguage">
    <input type="hidden" value="" name="page_lang" id="page_lang">

    <div class="accept_box">
      <div class="accept_top">
        <div class="order_radio_box">
          <label class="radio_label" for="credit_card"><input type="radio" id="credit_card"
              class="order_radio shipping_method" checked="checked">
            <span class="radio_icon"></span>
            <span class="radio_name">Credit Card</span>
            <span class="radio_t">
              <div class="accepted_payment_list"></div>
            </span>
          </label>
        </div>
      </div>
      <div class="accept_con">
        <div class="cardno_con">
          <input class="accept_txt nc_text" type="text" id="cardno_cover" autocomplete="off"
            value="" key_name="cardno" placeholder="Card Number" pattern="^[0-9 ]+$" maxlength="23"
            style="width: 618px;" />
          <input type='hidden' name="cardno" value='' />
          <input type="hidden" class="card_type" name="card_type" value='' />
          <img>
        </div>
        <div class="cardno_date">
          <div class="valid-date date"><input class="accept_txt nc_text" type="text" name="date"
              autocomplete="off" value="" placeholder="Expire Date(MM/YY)"
              oninput="checkDate(event)" /></div>
          <div class="valid-date cvv"><input class="accept_txt nc_text accept_cvv" type="text"
              name="cvv" autocomplete="off" value="" placeholder="Security Code(CVV)"
              onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="4" /></div>
        </div>
      </div>
      <div style="text-align: left;margin-top: 10px;font-size: 12px;color: #4c4c4c;">
        <svg style="position: static;vertical-align: middle;" t="1701679681230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7137" width="16" height="16"><path d="M484.010667 979.157333a562.304 562.304 0 0 1-385.152-534.229333V231.936a42.666667 42.666667 0 0 1 30.72-40.96l356.053333-103.893333A42.666667 42.666667 0 0 1 497.621333 85.333333a41.984 41.984 0 0 1 11.946667 1.749334l355.754667 103.893333a42.666667 42.666667 0 0 1 30.677333 40.96v213.077333a562.261333 562.261333 0 0 1-384.981333 534.144 42.666667 42.666667 0 0 1-13.482667 2.176 42.410667 42.410667 0 0 1-13.525333-2.176zM184.192 263.936v181.034667a477.098667 477.098667 0 0 0 313.301333 448.554666 477.056 477.056 0 0 0 313.130667-448.469333V263.978667l-313.045333-91.477334z m239.36 402.730667L282.026667 525.184a42.666667 42.666667 0 0 1 0-60.330667 42.666667 42.666667 0 0 1 60.373333 0l111.274667 111.274667 212.352-212.352a42.666667 42.666667 0 0 1 60.373333 0 42.666667 42.666667 0 0 1 0 60.373333l-242.517333 242.474667a42.666667 42.666667 0 0 1-30.208 12.501333 42.666667 42.666667 0 0 1-30.165334-12.458666z" fill="#25BB85" p-id="7138"></path></svg>
        <span style="margin-left: 5px;">asdasd</span>
    </div>
    </div>
    <button type="submit" class="accept_btn" id="submit" disabled><span class="nc_text"
        key_name="button">Pay</span> $21.90</button>
  </form>
</div>


<script type="text/javascript">

  var language = new Array();
  var button_click = false;
  var imgs = ["american_express", "mastercard", "visa", "apple_pay"];

  function renderImg() {
    var sliceImg = imgs.length && imgs.length > 3 ? imgs.slice(0, 3) : imgs
    var html = ''
    sliceImg.forEach(function (item) {
      html += "<span class='accepted_payment_image'>" +
        "<img id='accepted_payment_image' src='https://cn01-cdn.staticsyy.com/statics/cart/accepted_payment_brand/" + item + ".svg'>" +
        "</span>"
    })
    if (imgs.length > 3) html += "<span class='accepted_payment_image_more'>...</span>"
    $('.credit_card_2017 .accepted_payment_list').append(html)
  }

  renderImg()


  language = { "cn": { "credit_card": "\u4fe1\u7528\u5361", "button": "\u652f\u4ed8", "cardno": "\u5361\u53f7", "cvv_empty": "\u5b89\u5168\u7801\u4e0d\u80fd\u4e3a\u7a7a", "year_empty": "\u8bf7\u9009\u62e9\u6709\u6548\u671f(\u5e74)", "month_empty": "\u8bf7\u9009\u62e9\u6709\u6548\u671f(\u6708)", "cardno_error": "\u5361\u53f7\u4e0d\u6b63\u786e", "cvv_error": "\u5b89\u5168\u7801\u4f4d\u6570\u4e3a3\u4f4d\u6216\u80054\u4f4d" }, "tc": { "credit_card": "\u4fe1\u7528\u5361", "button": "\u652f\u4ed8", "cardno": "\u5361\u865f", "cvv_empty": "\u5b89\u5168\u78bc\u4e0d\u80fd\u70ba\u7a7a", "year_empty": "\u8acb\u9078\u64c7\u6709\u6548\u671f(\u5e74)", "month_empty": "\u8acb\u9078\u64c7\u6709\u6548\u671f(\u6708)", "cardno_error": "\u5361\u865f\u4e0d\u6b63\u78ba", "cvv_error": "\u5b89\u5168\u78bc\u4f4d\u6578\u70ba3\u4f4d\u6216\u80054\u4f4d" }, "en": { "credit_card": "Credit Card", "button": "Pay", "cardno": "Card Number", "cvv_empty": "The CVV is error", "year_empty": "The Expiration Year is erro", "month_empty": "he Expiration Month is error", "cardno_error": "The Card Number is error", "cvv_error": "The CVV is error" }, "fr": { "credit_card": "Carte de cr\u00e9dit", "button": "Payer", "cardno": "Num\u00e9ro de carte", "cvv_empty": "Le CVV est faux", "year_empty": "L'ann\u00e9e d'expiration est fause", "month_empty": "Le mois d'expiration est faux", "cardno_error": "Le num\u00e9ro de carte\u00a0est faux", "cvv_error": "Le\u00a0CVV\u00a0est faux" }, "jp": { "credit_card": "\u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9", "button": "\u652f\u6255\u3046", "cardno": "\u30ab\u30fc\u30c9\u756a\u53f7", "cvv_empty": "\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b3\u30fc\u30c9\u306f\u7a7a\u767d\u306b\u306a\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093", "year_empty": "\u6709\u52b9\u671f\u9593\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u5e74\uff09", "month_empty": "\u6709\u52b9\u671f\u9593\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u6708\uff09", "cardno_error": "\u30ab\u30fc\u30c9\u756a\u53f7\u306f\u6b63\u3057\u304f\u306a\u3044", "cvv_error": "\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b3\u30fc\u30c9\u306e\u6570\u306f3\u4f4d\u307e\u305f\u306f4\u4f4d\u3067\u3042\u308b" }, "ru": { "credit_card": "\u0411\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430", "button": "\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c", "cardno": "\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b", "cvv_empty": "CVV \u043a\u043e\u0434", "year_empty": "\u0414\u043e \u043a\u0430\u043a\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u043a\u0430\u0440\u0442\u0430", "month_empty": "\u0414\u043e \u043a\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u043a\u0430\u0440\u0442\u0430", "cardno_error": "\u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b", "cvv_error": "CVV \u043a\u043e\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 3 \u0438\u043b\u0438 4 \u0437\u043d\u0430\u043a\u043e\u0432" }, "it": { "credit_card": "Carta di credito", "button": "Pagamento", "cardno": "Numero di carta", "cvv_empty": "Il codice di sicurezza non pu\u00f2 essere vuoto", "year_empty": "Per favore scegli la validit\u00e0(anno)", "month_empty": "Per favore scegli la validit\u00e0(mese)", "cardno_error": "Il numero di carta non \u00e8 corretto", "cvv_error": "Il codice di sicurezza deve essere 3 o 4" }, "cs": { "credit_card": "Kreditn\u00ed karta", "button": "Platit", "cardno": "\u010c\u00edslo karty" }, "da": { "credit_card": "Kreditkort", "button": "Betale", "cardno": "Kortnummer" }, "de": { "credit_card": "Kreditkarte", "button": "Zahlen", "cardno": "Kartennummer" }, "es": { "credit_card": "Tarjeta de cr\u00e9dito", "button": "Paga", "cardno": "N\u00famero de tarjeta" }, "fi": { "credit_card": "Luottokortti", "button": "Maksaa", "cardno": "Kortin numero" }, "gr": { "credit_card": "\u03a0\u03b9\u03c3\u03c4\u03c9\u03c4\u03b9\u03ba\u03ae \u03ba\u03ac\u03c1\u03c4\u03b1", "button": "\u03a0\u03bb\u03b7\u03c1\u03c9\u03bc\u03ae", "cardno": "\u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b1\u03c2" }, "hu": { "credit_card": "Hitelk\u00e1rtya", "button": "Fizet\u00e9s", "cardno": "K\u00e1rtyasz\u00e1m" }, "id": { "credit_card": "Kartu kredit", "button": "Membayar", "cardno": "Nomor kartu" }, "kr": { "credit_card": "\uc2e0\uc6a9 \uce74\ub4dc", "button": "\uc9c0\ubd88", "cardno": "\uce74\ub4dc \ubc88\ud638" }, "nl": { "credit_card": "Kredietkaart", "button": "Betalen", "cardno": "Kaartnummer" }, "no": { "credit_card": "Kredittkort", "button": "Betale", "cardno": "Kortnummer" }, "pl": { "credit_card": "Karta kredytowa", "button": "Zap\u0142aci\u0107", "cardno": "Numer karty" }, "pt": { "credit_card": "Cart\u00e3o de cr\u00e9dito", "button": "Pagar", "cardno": "N\u00famero do cart\u00e3o" }, "ro": { "credit_card": "Card de credit", "button": "A plati", "cardno": "Num\u0103r de card" }, "sv": { "credit_card": "Kreditkort", "button": "Betala", "cardno": "Kortnummer" }, "th": { "credit_card": "\u0e1a\u0e31\u0e15\u0e23\u0e40\u0e04\u0e23\u0e14\u0e34\u0e15", "button": "\u0e08\u0e48\u0e32\u0e22\u0e40\u0e07\u0e34\u0e19", "cardno": "\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e31\u0e15\u0e23" }, "tr": { "credit_card": "Kredi kart\u0131", "button": "\u00f6deme", "cardno": "Kart numaras\u0131" }, "vi": { "credit_card": "Th\u1ebb t\u00edn d\u1ee5ng", "button": "Tr\u1ea3", "cardno": "S\u1ed1 th\u1ebb" } };

  function changeLanguage(code) {
    $('.nc_text').each(function () {
      var temp_key = $(this).attr('key_name');
      //console.log(language);
      if ($(this).attr('placeholder')) {
        $(this).attr('placeholder', language[code][temp_key]);

      } else {
        $(this).html(language[code][temp_key]);
      }

    });
  }

  function checkDate(e) {
    var date = new Date().getFullYear()
    var type = e.inputType
    var ret = e.target.value
    var dateSplit = date.toString().split('')
    var dates = dateSplit.slice(2, dateSplit.length)

    if (/^0+$/.test(ret)) {
      ret = '0'
    }

    if (ret) {
      if (ret[0] === '/') ret = ''
      if (ret.length === 2 && isNaN(ret[1])) ret = ret.substring(0, 1)
      if (ret.length === 3 && isNaN(ret[2])) ret = ret.substring(0, 2)
    }

    var delCode = ['deleteContentBackward', 'deleteContentForward']
    var keyCode = ['insertFromPaste'].concat(delCode)

    if ((keyCode.includes(type) || !type) && ret) {
      var str = ret.split(/[^\d]/g)
      var strJoin = str.join('')
      if (strJoin.length === 1) {
        if (delCode.includes(type)) ret = strJoin
        else ret = '0' + strJoin + ' / '
      }
      if (strJoin.length === 2) {
        var start = strJoin.substring(0, 2)
        if (delCode.includes(type)) {
          var startStr = Number(start) > 12 ? '12' : start === '00' ? '01' : start
          ret = startStr
        } else ret = start > 12 ? 12 + ' / ' : start + ' / '
      }
      if (strJoin.length === 3) {
        var start = strJoin.substring(0, 2) > 12 ? 12 : strJoin.substring(0, 2)
        var end = strJoin.substring(2, 3) > dates[0] ? strJoin.substring(2, 3) : dates[0]
        ret = start + ' / ' + end
      }
      if (strJoin.length > 3) {
        var start = strJoin.substring(0, 2) > 12 ? 12 : strJoin.substring(0, 2)
        var end =
          strJoin.substring(2, 4) > dates.join('') ? strJoin.substring(2, 4) : dates.join('')
        ret = start + ' / ' + end
      }
    }

    if (!/[\d]+$/.test(ret)) {
      if (ret.split('/').length === 2 && !ret.includes(' ')) {
        ret = ret.substring(0, 2) + ' / '
      }
      if (ret.length > 5) {
        var text = ret.substring(5, ret.length)
        for (let i = 0; i < text.length; i++) {
          if (!/[\d]+$/.test(text[i])) {
            ret = ret.substring(0, 5 + i)
          }
        }
      }
      if (ret.includes('/')) {
        if (ret.length === 4) ret = ret.split(' /')[0]
        else ret = ret
      } else ret = ''
    }

    if (ret.includes('/')) {
      var splitRet = ret.split(' / ')
      if (splitRet[0].length > 2) {
        var newRetStart = Number(splitRet[0])
        if (splitRet[0] > 12) newRetStart = 12
        if (splitRet[0] < 10) newRetStart = '0' + splitRet[0]
        ret = newRetStart + ' / '
      } else {
        var val = splitRet[1]

        for (let index = 0; index < dates.length; index++) {
          if (val[index] > dates[index]) {
            ret = ret
            break
          }
          if (val[index] < dates[index]) ret = ret.substring(0, 4 + index + 1)
        }
      }
    }

    if (type === 'insertText') {
      if (!ret.includes('/')) {
        if (ret.length > 2) {
          var dateSplit = date.toString().split('')
          var dates = dateSplit.slice(2, dateSplit.length)
          var lastVal = ret.substring(2, 3)
          if (lastVal < dates[0]) {
            lastVal = dates[0]
          }
          ret = ret.substring(0, 2) + ' / ' + lastVal
        }

        if (ret.length === 2) {
          if (ret < 13) ret = ret + ' / '
          else ret = `12 / `
        }

        if (ret.length === 1 && ret > 1) ret = '0' + Number(ret) + ' / '
      }
    }

    if (ret.length > 7) ret = ret.substring(0, 7)

    e.target.value = ret
  }

  function checkEmpty(val) {
    if (val == '' || val == undefined || val == null) {
      button_click = false;
      return true;
    } else {
      return false;
    }
  }

  function validData() {
    var reg = /^\d{2}\s\/\s\d{2}/g
    var val = $('.credit_card_2017 .valid-date.date input').val()
    var msg = val ? 'Please enter the correct format' : 'Please enter the time'
    if (!reg.test(val)) {
      var findDom = $('.credit_card_2017 .valid-date.date .err')
      if (findDom.length) {
        $('.credit_card_2017 .valid-date.date .err').html(msg)
      } else {
        var dom = '<div class="err">' + msg + '</div>'
        $('.credit_card_2017 .valid-date.date').addClass('valid-err')
        $('.credit_card_2017 .valid-date.date').append(dom)
      }
      $('.credit_card_2017 .valid-date.date .accept_txt').addClass('animated shake');
      setTimeout(function () {
        $('.credit_card_2017 .valid-date.date .accept_txt').removeClass('shake');
      }, 1000);
      return true
    }
    $('.credit_card_2017 .valid-date .err').remove()
    $('.credit_card_2017 .valid-date').removeClass('valid-err')
    return false
  }

  function checkCardNo(card) {
    var rule = new Array();
    rule['visa'] = new RegExp("^4\\d{15}$");
    rule['mastercard'] = new RegExp("^(5[1-5][\\d]{2}|222[1-9]|22[3-9][\\d]|2[3-6][\\d]{2}|27[0-1][\\d]|2720)\\d{12}$");
    rule['jcb'] = new RegExp("^(?:2131|1800|35\\d{3})\\d{11}$");
    rule['maestro'] = new RegExp("^(50|(5[6-9])|(6[\\d]))\\d{10,17}$");
    rule['american_express'] = new RegExp("^3[47]\\d{13}$");
    //rule['aura'] = new RegExp("^5\\d{18}$");
    rule['diners_club'] = new RegExp("^3(?:0[0-5]|[68][0-9])[0-9]{11,13}$");
    rule['discover'] = new RegExp("^6(?:011|5\\d{2})\\d{12}$");
    //rule['hipercard'] = new RegExp("^(?:606282|637095|637568)\\d{10}|38\\d{14,17}$");
    //rule['elo'] = new RegExp("^(?:50670[7-8]|506715|50671[7-9]|50672[0-1]|50672[4-9]|50673[0-3]|506739|50674[0-8]|50675[0-3]|50677[4-8]|50900[0-9]|50901[3-9]|50902[0-9]|50903[1-9]|50904[0-9]|50905[0-9]|50906[0-4]|50906[6-9]|50907[0-2]|50907[4-5]|636368|636297|504175|438935|40117[8-9]|45763[1-2]|457393|431274|50907[6-9]|50908[0-9]|627780)[0-9]*$");
    var card_type = "";
    for (i in rule) {
      if (rule[i].test(card)) {
        card_type = i;
      }
    }
    return card_type;
  }
  $(function () {

    $("#form_post").submit(function (e) {
      if (validData()) {
        return false
      }
      if (button_click) {
        return false;
      } else {
        button_click = true;
      }

      var page_lang = $('#page_lang').val();
      var cvv_val = $("input[name='cvv']").val();
      var cardno_val = $("input[name='cardno']").val();
      var date = $("input[name='date']").val();

      var reg = /^\d{2}\s\/\s\d{2}/g
      var val = $('.credit_card_2017 .valid-date.date input').val()
      if (val || !reg.test(val)) {
        button_click = false;
      }


      if (checkCardNo(cardno_val) == '') {
        button_click = false;
        $(function () {
          $('#cardno_cover').addClass('animated shake');
          setTimeout(function () {
            $('#cardno_cover').removeClass('shake');
          }, 1000);
        });
        return false;
      }
      if (checkEmpty(date)) {
        button_click = false;
        $(function () {
          $('input[name="date"]').addClass('animated shake');
          setTimeout(function () {
            $('input[name="date"]').removeClass('shake');
          }, 1000);
        });
        return false;
      }
      if (cvv_val.length < 3 || cvv_val.length > 4) {
        button_click = false;
        $(function () {
          $("input[name='cvv']").addClass('animated shake');
          setTimeout(function () {
            $("input[name='cvv']").removeClass('shake');
          }, 1000);
        });
        return false;
      }

      if(window['JSEncrypt']){
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgHS3gmy0VIp3TuiKdtr3d4hB0tBSjg0HdxncZnv2I8CTJGbk7RKtvWgh2kB55NHLJPsSxp55rgHfMCyLzPB0+v/FrZ+zw2becIZAn+wEJxRfNc6y/jF3Tmr9hkvQA0xB3laxTfhQuRDv+EnFnYu/x1o+COIUHHlURPpNPbouxYf/AgMBAAE=-----END PUBLIC KEY-----');
        var encrypted = encrypt.encrypt(cardno_val);
        $("input[name='cardno']").val(encrypted)
      }
      createAjaxLoading();
      $('#submit').attr('disabled', true);
      return true;
    });
   
    $("#cardno_cover").on("input", function () {
      var v = $(this).val();
      let caret = this.selectionStart;
      var formatVal = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
      if (caret === v.length) {
        caret += 1
      }
      $(this).val($.trim(formatVal));
      // if (formatVal !== v) {
      //   if (caret % 5 == 0) {
      //     console.log("不等于", caret);
      //     //  formatVal =  $.trim(formatVal)
      //   } else {

      //   }
      //   //  formatVal = formatVal.slice(0, caret-1) + formatVal.slice(caret + 1 );
      //   //  console.log("不等于",caret);
      // }


      // if(formatVal === preValue.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")){
      //   if(caret < preValue.length){
      //     console.log('ss');
      //   }
      // }else{
      //   // caret+=1
      // }
      // }

      this.selectionEnd = caret;

    })

    $("#cardno_cover").on("keyup", function () {
      var v = $(this).val();
      var cv = v.replace(/\s/g, "");
      $("input[name='cardno']").val(cv);
      var card_type = checkCardNo(cv);
      if (card_type) {
        $(".cardno_con img").attr("src", "https://cn01-cdn.staticsyy.com/statics/cart/accepted_payment_brand/" + card_type + ".svg").show();
        $(".card_type").val(card_type);
      } else {
        $(".cardno_con img").hide();
        $(".card_type").val('');
      }
    });

    $('#page_lang').change(function () {
      changeLanguage($(this).val());
    });

    $("#page_lang").val('en');
    $("#BrowserDateTimezon").val(new Date().getTimezoneOffset() / -60);

    $("#page_lang").trigger('change');

    $("input[name='resolution']").val(window.screen.width + "x" + window.screen.height);
    $('.accept_btn').attr('disabled', false)
  })
</script>